<template>
  <div class="indexBox" :style="{height:winHeight +'px'}">
    <div class="indexForm" >
      <img src="/static/image/homeTitle@2x.png" class="indexTitle" alt="">
      <input type="text" v-model="name">
      <a @click.stop="goto">
        <img src="/static/image/homeBtn@2x.png" alt="">
      </a>
    </div>
    <div class="indexInfo">
      <img src="/static/image/homeInfo@2x.png" alt="">
    </div>
  </div>
</template>

<script>
import router from '../router/index'
  export default {
    name: "HelloWorld",
    data() {
      return {
        msg: "Welcome to Your Vue.js App",
        winHeight: $(window).innerHeight(),
        name:''
      };
    },
    methods:{
      goto:function(){
        let that = this;
        if(that.name !=''){
router.push({name:'home',params:{name:that.name}})
        }else{
          alert("大侠尊姓大名啊？")
        }
        
        // console.log(that.name)
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
